<template>
  <div class="content">
    <!--    户表昨日用量排名前十-->
    <div class="content-top">
<!--      <span class="active">户表</span>-->
<!--      <span>近七天抄表数及抄表率</span>-->
      <span class="active">近七天统计</span>
      <span :class="activeIndex === 1 ? 'active-type' : ''" @click="changeTab(1)">大用户表</span>
      <span :class="activeIndex === 0 ? 'active-type' : ''" @click="changeTab(0)">户表</span>
    </div>
    <div class="content-bottom">
      <div id="main" ref="main" style="width: 100%;height: 22vh;"></div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import {homepageCopyDataForXb} from '@/api/index/meteread.js'
require('echarts/theme/macarons') // echarts theme

export default {
  name: 'ReadingData',
  data() {
    return {
      activeIndex: 1, // 户表
      dataListXb: [],
      dataListDb: [],
      option: {
        tooltip: {//鼠标指上时的标线
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        legend: {
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          x: 'center', // 图例水平居中
          y: 'middle', // 图例垂直居中
          data: ['抄回数', '抄表率'],
          right: '10px',
          top: '0px',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          }
        },
        grid: {
          // x: 35,
          // y: 25,
          // x2: 8,
          // y2: 25,
          // left: 50,
          // right: 50,
          x: 10, //距离左侧距离
          y: 40,//距离顶部距离
          x2: 5, //距离右侧距离
          y2: 10, //距离底部距离
          containLabel: true,
          // right: 38,
        },
        xAxis: [{
          type: 'category',
          // boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          data: []
        }],
        yAxis:[{
          type: 'value',
          minInterval: 1,
          splitNumber: 5, //坐标轴的分割段数
          // name: '抄回数',
          position: 'left',
          min: 0,
          // interval: Math.ceil(Math.max.apply(null, valueDataAll) / 5) || 1,
          // max: Math.ceil(Math.max.apply(null, valueDataAll) / 5) * 5 || 5,
          // axisTick: {
          //   show: false
          // },
          axisLine: {
            lineStyle: {
              color: '#57617B',
            }
          },
          axisLabel: {
            // margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            formatter: '{value} 台'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
              type: 'dotted',
            }
          },
          // position: 'left',
        },{
          type: 'value',
          // minInterval: 1,
          min: 0,
          minInterval: 0.5,
          splitNumber: 5, //坐标轴的分割段数
          // name: '抄表率',
          position: 'right',
          // axisTick: {
          //   show: false
          // },
          axisLine: {
            lineStyle: {
              color: '#57617B',
            }
          },
          axisLabel: {
            // margin: 10,
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            formatter: '{value} %'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)',
              type: 'dotted',
            }
          },
        },],
        series: [{
          name: '抄表率',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' %';
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 136, 212, 0.3)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 136, 212, 0)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: 'rgb(0,136,212)'
            }
          },
          data: []
        }, {
          name: '抄回数',
          type: 'bar',
          barWidth: '30%',
          yAxisIndex: 0,
          data: [],
          animationDuration: 2000,
          animationEasing: 'quarticln',
          itemStyle: {
            borderRadius: 10,
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: '#30fff8' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#ffad15' // 100% 处的颜色
                }
              ]
            },
          },
          tooltip: {
            valueFormatter: function (value) {
              return value + ' 台';
            }
          },
        }]
      } // 户表
    }
  },
  mounted() {
    this.activeIndex = 1
    // setTimeout(() => {
    //   // this.initEcharts()
    //   this.getListXb()
    // }, 1000)
    // if(this.dataListDb!== []){
    //   this.renderChart()
    // }
    this.timeFun()
  },
  watch:{
    dataListDb(val) {
      this.renderChart()
    },
  },
  // 销毁组件
  destroyed() {
    this.myChart.dispose()
  },
  methods: {
    // 切换户表和大用户表按钮
    changeTab(index) {
      this.setActiveItem(index)
    },
    // 设置当前展示的图表
    setActiveItem(index) {
      this.activeIndex = index
      this.renderChart()
    },
    // 获取户表抄表率数据
    getListXb(data) {
      // homepageCopyDataForXb({days: this.dataValue}).then(response => {
      //   if (response.code === 200) {
      //     this.dataListXb = response.data.copyData
      //   }
      // })
      this.dataListXb = data
      console.log(this.dataListXb,"xb")
    },
    // 获取大用户表抄表数据
    getListDb(data) {
      this.dataListDb = data
      console.log(this.dataListDb,"db")
    },
    // 处理数据
    renderChart(type) {
      let seriesListOne = []
      let seriesListTwo = []
      let xAxisList = []
      if(this.dataListXb.length > 0 && this.activeIndex === 0){
        this.dataListXb.forEach(item => {
          if(item.copyRate === null || item.copyRate === ''){
            item.copyRate = ''
          }
          if(item.copyCount === null || item.copyCount === ''){
            item.copyCount = ''
          }
          seriesListOne.push([item.date, (item.copyRate * 100).toFixed(2)])
          seriesListTwo.push([item.date, item.copyCount])
          xAxisList.push(item.date)
          xAxisList.sort((a, b) => {
            return Date.parse(a) - Date.parse(b)
          })
        })
        this.option.series[0].data = seriesListOne
        this.option.series[1].data = seriesListTwo
        this.option.xAxis[0].data = xAxisList
        console.log(this.option,"optionX")
        this.initEcharts()
      }else if(this.dataListXb.length === 0 && this.activeIndex === 0) {
        this.option.series[0].data = []
        this.option.series[1].data = []
        this.option.xAxis[0].data = []
        this.initEcharts()
      }else if(this.dataListDb.length === 0 && this.activeIndex === 1){
        this.option.series[0].data = []
        this.option.series[1].data = []
        this.option.xAxis[0].data = []
        this.initEcharts()
      }else if(this.dataListDb.length > 0 && this.activeIndex === 1) {
        this.dataListDb.forEach(item => {
          if(item.copyRate === null || item.copyRate === ''){
            item.copyRate = ''
          }
          if(item.copyCount === null || item.copyCount === ''){
            item.copyCount = ''
          }
          seriesListOne.push([item.date, (item.copyRate * 100).toFixed(2)])
          seriesListTwo.push([item.date, item.copyCount])
          xAxisList.push(item.date)
          xAxisList.sort((a, b) => {
            return Date.parse(a) - Date.parse(b)
          })
        })
        this.option.series[0].data = seriesListOne
        this.option.series[1].data = seriesListTwo
        this.option.xAxis[0].data = xAxisList
        console.log(this.option,"optionD")
        this.initEcharts()
      }
    },
    // 初始化图表
    initEcharts() {
      let myChart = echarts.init(this.$refs.main);
      myChart.setOption(this.option);
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },
    // 定时器 控制展示的是大用户表内容还是户表内容
    timeFun() {
      let timer = null
      timer = setInterval(() => {
        if (this.activeIndex >= 1) {
          this.activeIndex = 0
          this.renderChart(0)
        } else {
          this.activeIndex++
          this.renderChart(1)
        }
      }, 20000)
    }
  }
}
</script>
<style lang="scss" scoped>
.content-top {
  height: 6vh;
  line-height: 6vh;
  padding-left: 0.2rem;
  cursor: pointer;
  span {
    color: #00d8ff;
    font-size: .2rem;
    font-weight: 520;
    padding: 0 .1rem;
    font-family: "Adobe 仿宋 Std R";
  }

  span:first-child {
    border-right: 0.01rem solid #1950c4;
    padding-left: 0;
  }

  span.active {
    color: #fff;
  }
  .active-type {
    font-size: .18rem;
    margin: .1rem;
    padding: .05rem .05rem;
    background: #3aa0e5;
    color: white;
    border-radius: 5px;
  }
}

.content-bottom {
  margin: .1rem .1rem;
  height: 22vh;
}
</style>
